<!-- 添加收件人组件 -->
<template>
  <div style="width: 100%;overflow: hidden;">
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '100%' }"
    >
      <div style="position: fixed;top: 0;left: 0;width: 100%;z-index: 999;">
        <van-nav-bar
          title="添加收件人"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
        <van-form
          @submit="onSubmit"
          style="height: 100%;overflow: auto;box-sizing: border-box;"
        >
          <div class="client">
            <!-- right-icon="edit" -->
            <van-field
            :rules="[{ required: true, message: '请输入收件人' }]"
              required
              label="收件人："
              placeholder="请输入收件人"
              v-model="fieldListParams.Addressee"
            >
            </van-field>
            <van-field
            :rules="[{ required: true, message: '请输入联系电话' }]"
              required
              label="联系电话："
              placeholder="请输入联系电话"
              v-model="fieldListParams.TelNumber"
            />

            <van-field
            :rules="[{ required: true, message: '请输入收件地址' }]"
              required
              label="收件地址"
              placeholder="请输入收件地址"
              v-model="fieldListParams.Address"
            />
            <van-field
              label="备注"
              placeholder="请输入备注"
              v-model="fieldListParams.Remark"
            />
          </div>
          <div class="submitButton" >
            <van-button round block type="info" native-type="submit"
              >保存收件人</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Col, Cell, CellGroup, Popup, NavBar, Toast, Field } from "vant";

export default {
  components: {
    "van-nav-bar": NavBar,
    "van-popup": Popup, //弹层
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup
  },
  data() {
    return {
      // 是否显示弹窗
      show: false,
      // 添加收件人绑定数据
      fieldListParams: {
        // 收件人
        Addressee: "",
        // 联系电话
        TelNumber: "",
        // 收件地址
        Address: "",
        // 是否是默认地址
        IsDefault: 1,
        // 备注
        Remark: "",
        // 客户id
        CustomerId: ""
      }
    };
  },
  methods: {
    //返回
    onClickLeft() {
      this.show = false;
    },
    close() {
      this.show = false;
    },
    clear() {
      this.queryParam = [];
      this.getDataList();
    },
    // 保存收件人信息
    onSubmit() {

      // this.$set(this.entity, "Transactor", this.info.Id);
      // var entityData = { ...this.entity };
      // var SSAD_List = [...this.data];
      // entityData.SSAD_List = SSAD_List;

      this.http
        .post(
          "/CustomerManagement/Cust_AddressBook/SaveData",
          this.fieldListParams
        )
        .then(resJson => {
          console.log(resJson);

          if (resJson.Success) {
            Toast("添加成功");
            // 关闭添加收件人的弹窗
            this.show = false;
            console.log(this.$parent);
            // 调用父组件里的获取收件人信息列表
            this.$parent.contactPerson();
            // 返回样品列表页面
            this.$router.push({ path: "/service/Edit", query: { readonly: 0 } });
            // 数据初始化
            this.fieldListParams={
              // 收件人
              Addressee: "",
              // 联系电话
              TelNumber: "",
              // 收件地址
              Address: "",
              // 是否是默认地址
              IsDefault: 1,
              // 备注
              Remark: "",
              // 客户id
              CustomerId: ""
            }
          } else {
            Toast(resJson.Msg);
          }
        });
    },

    getDataList() {
      //     this.http
      //       .post("/CustomerManagement/Customer/GetDataListByMoreCondition", {
      //         SortField: "Id",
      //         SortType: "asc",
      //         Search: this.queryParam,
      //         ...this.filters
      //       })
      //       .then(resJson => {
      //         this.data = resJson.Data;
      //         console.log(this.List);
      //       });
    },
    //   打开弹窗
    init() {
      this.show = true;
    },
    //   打开弹窗
    openForm() {
      this.init();
      //     this.getDataList();
    }
  }
};
</script>

<style scoped>
/* 覆盖van-button的默认样式 */
.van-button {
  height: 35px !important;
  border-radius: 5px;
}
/* 适配底部导航栏 */
.page-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 65px; /*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
  height: calc(
    58px + constant(safe-area-inset-bottom)
  ); /* 直接扩展高度，因为padding-bottom是内边距 */
  height: calc(58px + env(safe-area-inset-bottom)); /* 直接扩展高度 */
  background: #fff;
  padding: 10px 11px 0 20px;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 iOS<11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2*/
  text-align: right;
  border-top: 1px solid #e9e9e9;
}

.ckbxcli {
  border: 1px solid Gainsboro;
  /* width: 250px; */
  height: 150px;
  text-align: center;
  margin-left: 15px;
  margin-top: 15px;
  padding-right: 0px;
  padding-left: 0px;
  padding-bottom: 2px;
  cursor: pointer;
  padding-top: 6px;
  list-style-type: none;
  display: inline-block;
}
ul {
  margin-top: 20px;
}
.nav {
  position: fixed !important;
  width: 100%;
}
</style>
